<template>
  <div v-if="visible" class="cont" >
      <div class="main">
          <div class="title">骆米智慧校园服务协议</div>
          <img class="tou-img" src="@/assets/img/vip/tou.png" alt="">
          <div class="text-p">
              <iframe class="iframeStyle" src="static/xieyi.html"></iframe>
          </div>

          <div class="oper-p">
                <div @click="agree" class="comfirm-btn">同意</div>
                <div @click="refuse" class="cancel-btn">拒绝</div>
            </div>
      </div>
  </div>
</template>
<script>
export default {
    computed: {
      orderDetail () {
        return this.$store.state.vip.orderDetail
      }
    },
    data () {
      return {
          visible: false
      }
    },
   
    methods: {
      close () {
          this.visible = false
      },
      open () {
          this.visible = true
      },
      agree () {
        this.$router.push('pay')
        this.close()
      },
      refuse () {
        this.close()
      }
    }
}
</script>
<style scoped>
.cont{
  position: fixed; top: 0; bottom: 0; right: 0; left: 0; background: rgba(0,0,0,0.5); z-index: 100;
}
.main{
  position: relative;
  margin: 5% auto 0 auto; background: #fff;border-radius: 0.15rem;
   width: 6.68rem; height: 90%; 
}
.title{
  position: absolute; top: 0; left: 0; width: 100%; text-align: center;
  font-size: 0.32rem; color: #fff; padding: 0.13rem 0;
}
.tou-img{
  max-width: 100%;
}
.text-p{
   -webkit-overflow-scrolling: touch;
  padding:0 0.36rem; color: #1B1F27; font-size: 0.28rem;
  overflow: scroll; height: calc(100% - 2.2rem);

    white-space: pre-wrap;

    line-height: 0.5rem;
}
.oper-p{
    padding: 0.3rem 0; text-align: center;
}
.comfirm-btn{
    display: inline-block; vertical-align: middle; background: #128FEF; color: #fff;
    font-size: 0.28rem; font-weight: bold; border: 1px solid #128FEF; border-radius: 0.4rem;
    width: 2.68rem; height: 0.8rem; line-height: 0.8rem; text-align: center;
    margin: 0 0.15rem;
}
.cancel-btn{
    display: inline-block; vertical-align: middle;background: #fff; color:#128FEF;
    font-size: 0.28rem; font-weight: bold; border: 1px solid #128FEF; border-radius: 0.4rem;
    width: 2.68rem; height: 0.8rem; line-height: 0.8rem; text-align: center;
    margin: 0 0.15rem;
}
 .iframeStyle{
    border: none;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
</style>
